<template>
  <div class="content">
    <el-dialog title="选择位置" v-if="showMap" :visible.sync="showMap" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" top="5vh" >
      <iframe id="mapPage" style="width: 100%;height: 500px" frameborder=0
              src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=RSQBZ-R2NER-KFMWS-W6OZN-UXMTE-H4BIF&referer=91885App">
      </iframe>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" class="primary"  @click="showMap = false">确 定</el-button>
          </span>
    </el-dialog>


    <div class="page-content">
      <Navigation :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:2,value:'发布职位',url:$route.path}]"></Navigation>
      <div class="block" v-loading="formLoading">
        <div class="title-block">
          <div class="title-num">01</div>
          <div class="title">职位基本信息</div>
        </div>
        <el-alert
            title="发布警告"
            type="warning"
            description="严禁发布虚假职位信息，同时职位信息不得包含歧视性内容（如学校、性别等）。一经发现，我们将有权采取包括但不限于封停账号、全站公示、解除合作等管控措施！"
            show-icon
        class="warning-text">
        </el-alert>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">职位名称：</div>
          <el-input class="info-box" v-model="form.jobTitle" placeholder="请仔细填写职位名称，发布后不可修改" maxlength="20"></el-input>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">职位分类：</div>
          <template>
            <el-select v-model="form.recruitType" placeholder="请选择职位分类" class="info-box">
              <el-option
                  v-for="item in [{id:1,value:'全职'},{id:2,value:'兼职'}]"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">职位类别：</div>

          <div class="info-box">
            <el-cascader v-model="form.jobType"
                :options="category"
                :props="optionProps"
                :show-all-levels="false"
            ></el-cascader>
          </div>

        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">职位描述：</div>
         <textarea placeholder="请输入职责描述" class="info-box2" v-model="form.jobDescription" maxlength="500">职责描述：</textarea>
        </div>
        <div class="toolTip-item">
          <div class="toolTip">职位描述中请勿填写涉及歧视的内容</div>
          <el-tooltip class="item" effect="dark" content="例如：女性优先，只招男士，残疾，乙肝等" placement="top">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">工作地点：</div>
          <el-input class="info-box" v-model="form.jobAddress" placeholder="请选择工作地址" disabled></el-input>
          <el-button size="mini" style="margin-left: 10px" icon="el-icon-position" type="primary" @click="showMap=true">选择位置</el-button>
        </div>
        <div class="info-block">
          <div class="work-name">职位福利：</div>
          <el-input class="info-box" v-model="form.welfare" v-if="form.welfare!==''" clearable></el-input>
          <div style="border: 1px dashed #ff7626;border-radius: 8px;margin-left: 5px;" @click="editItem" ><i class="el-icon-plus" style="color: #ff7626;padding: 8px 12px;cursor: pointer;">添加福利</i></div>

        </div>
        <div class="title-block1">
          <div class="title-num">02</div>
          <div class="title">职位要求</div>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">工作经验：</div>
            <el-select v-model="form.expId" placeholder="请选择工作经验" class="info-box">
              <el-option
                  v-for="item in experience"
                  :key="item.id"
                  :label="item.data"
                  :value="item.id">
              </el-option>
            </el-select>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">学历要求：</div>
            <el-select v-model="form.eduId" placeholder="请选择学历" class="info-box">
              <el-option
                  v-for="item in education"
                  :key="item.id"
                  :label="item.data"
                  :value="item.id">
              </el-option>
            </el-select>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">薪资范围：</div>
          <el-select :disabled="form.salaryNegotiable" v-model="form.minSalary" placeholder="请选择最低薪资">
            <el-option v-for="(item,index) in salaryStart" :key="index" :label="item+'元'" :value="item">
            </el-option>
          </el-select>
          <div style="margin: 0 10px;">-</div>
          <el-select :disabled="form.salaryNegotiable" v-model="form.maxSalary" placeholder="请选择最高薪资">
            <el-option v-for="(item,index) in salaryEnd" :key="index" :label="item+'元'" :value="item">
            </el-option>
          </el-select>
            <el-checkbox v-model="form.salaryNegotiable" @change="faceEmpty" style="margin-left: 10px">薪资面议</el-checkbox>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">工作时间：</div>
            <el-time-select
                placeholder="起始时间"
                placement="bottom-start"
                v-model="form.startTime"
                :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00',
                }">
            </el-time-select>
            <div style="margin: 0 10px;">-</div>
            <el-time-select
                placeholder="结束时间"
                v-model="form.endTime"
                placement="bottom-start"
                :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00',
                minTime: form.startTime
                }">
            </el-time-select>
        </div>
        <div class="info-block">
          <div class="must">*</div>
          <div class="work-name">职位关键字：</div>
          <el-input class="info-box" v-model="form.keyword" placeholder="请填写关键字以逗号隔开，便于匹配求职者" maxlength="20"></el-input>
        </div>
        <div class="form-agreement" >
          <el-checkbox v-model="checked">我以阅读并同意</el-checkbox>
          <router-link :to="{name:'Issue'}" class="agreement-link">《职位发布协议》</router-link>
        </div>
        <div class="sub-btn">
          <div class="btn2 sub" @click="submit" style="margin-right: 30px">发布职位</div>
          <template>
            <el-checkbox v-model="form.worry">急招</el-checkbox>
          </template>
        </div>
      </div>
    </div>
    <el-dialog title="职位福利" v-if="dialogVisible" :visible.sync="dialogVisible" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="20vh" :destroy-on-close="true">
      <JobWelfare ref="welfare" @child="receive" :pid="form.id"></JobWelfare>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.welfare.submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import {getSalaryData} from "@/utils/utils";
import {getEducation as getEducationApi, getExperience as getExperienceApi, getJobCategory as getJobCategoryApi} from "@/api/config";
import {validate} from "@/utils/validate";
import {addAndUpdateJob, findAllJobById} from "@/api/position";
import JobWelfare from "@/components/JobWelfare/JobWelfare";
export default {
  name: "JobMessage",
  components: {JobWelfare, Navigation},
  data(){
    return{
      dialogVisible: false,
      formLoading:false,
      checked:true,
      form:{
        id:0,
        jobTitle:'',
        recruitType:1,
        jobType:null,
        jobDescription:'',
        jobAddress:'',
        welfare:'',
        expId:null,
        eduId:null,
        minSalary:null,
        maxSalary:null,
        salaryNegotiable:false,
        startTime:'08:30',
        endTime:'18:00',
        longitude:null,
        latitude:null,
        keyword:'',
        worry: false
      },
      rule:{
        jobTitle:{
          name:'职位名称',
          required:true,
        },
        jobType: {
          name: '职位类别',
          required: true
        },
        jobDescription: {
          name: '职位描述',
          required: true
        },
        jobAddress: {
          name: '工作地点',
          required: true
        },
        latitude: {
          name: '工作地点',
          required: true
        },
        longitude: {
          name: '工作地点',
          required: true
        },
        expId: {
          name: '工作经验',
          required: true
        },
        eduId: {
          name: '学历要求',
          required: true
        },
        minSalary:{
          name:'薪资范围',
          validator: function (value, form, callback) {
            if(form.salaryNegotiable){
              callback();
            }else if(!value){
              callback('请选择薪资范围');
            }
          }
        },
        maxSalary:{
          name:'薪资范围',
          validator: function (value, form, callback) {
            if(form.salaryNegotiable){
              callback();
            }else if(!value){
              callback('请选择薪资范围');
            }
          }
        },
        startTime:{
          name:'工作时间',
          required:true,
        },
        endTime:{
          name:'工作时间',
          required:true,
        },
        keyword:{
          name:'职位关键字',
          required:true,
        }
      },

      categoryLoading:false,
      category:[],
      optionProps: {
        value: 'id',
        label: 'jobTitle',
        children: 'subLevelModelList',
      },

      experienceLoading:false,
      experience:[],

      educationLoading:false,
      education:[],

      salaryStart:[],
      salaryEnd:[],

      showMap:false,

      location:null
    }
  },
  watch:{
    "form.minSalary":function (newVal){
      this.getSalary(newVal/1000)
      if(!this.salaryEnd.includes(this.form.maxSalary)){
        this.form.maxSalary=this.salaryEnd[0]
      }
    }
  },
  methods:{
    editItem() {
      this.dialogVisible = true;
    },
    receive(value){
      this.dialogVisible=false
      this.form.welfare=value
    },
    //获取工资选项
    getSalary(select){
      const data=getSalaryData(select);
      this.salaryStart=data[0];
      this.salaryEnd=data[1];
    },
    getDetail(){
      this.formLoading=true
      findAllJobById({id:this.id}).then((res)=>{
        res.salaryNegotiable=res.salaryNegotiable === 1;
        this.form=res;
        if(res.worry>0)
        {
          this.form.worry = true
        }
      }).finally(()=>{
        this.formLoading=false
      })
    },
    submit(){
      if(this.formLoading){
        this.$message.warning('请等待加载完成');
        return;
      }
      if(validate(this.form,this.rule)){
        let form=JSON.parse(JSON.stringify(this.form));
        if(typeof form.jobType==='object'){
          form.jobType=form.jobType[2];
        }
        form.salaryNegotiable=form.salaryNegotiable?1:0;
        const loading=this.$loading({text:'提交中'});
        addAndUpdateJob(form).then(()=>{
          this.$message.success('保存成功');
          this.$router.push("/mine-center/enterprise?tableId=2");
        }).finally(()=>{
          loading.close()
        })
      }
    },
    getJobCategory(){
      this.categoryLoading=true
      getJobCategoryApi({}).then((res)=>{
        this.category=res
      }).finally(()=>{
        this.categoryLoading=false
      })
    },
    getExperience(){
      this.experienceLoading=true
      getExperienceApi({}).then((res)=>{
        this.experience=res
      }).finally(()=>{
        this.experienceLoading=false
      })
    },
    getEducation(){
      this.educationLoading=true
      getEducationApi({}).then((res)=>{
        this.education=res
      }).finally(()=>{
        this.educationLoading=false
      })
    },
    faceEmpty()
    {
      this.form.minSalary=null
      this.form.maxSalary=null
      console.log(111111)
      console.log(this.form.minSalary)

    }
  },
  beforeDestroy() {
    window.removeEventListener('message',function (){

    })
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getSalary(0);
    this.getJobCategory();
    this.getExperience();
    this.getEducation();
    window.addEventListener('message', (event) =>{
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      let loc = event.data;
      if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        this.form.latitude=loc.latlng.lat;
        this.form.longitude=loc.latlng.lng;
        this.form.jobAddress=loc.poiname
      }
    }, false);
    if(this.id){
      this.getDetail()
    }

  }
}
</script>

<style lang="scss" >
.content{
  .page-content{
    width: $contentWidth;
    min-height: $fullMinHeight;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .block{
      width: calc(100% - 200px);
      background-color: #fff;
      height: auto;
      padding: 30px;
      display: flex;
      flex-direction: column;
      .title-block{
        display: flex;
        flex-direction: row;
        align-items: center;
        .title-num{
          color: $orange;
          font-size: 24px;
        }
        .title{
          font-size: 18px;
          font-weight: bold;
          margin-left: 5px;
        }
      }
      .el-alert{
        .el-alert__icon{
          color: #E6A23C !important;
        }
      }
      .el-alert__content{
        .el-alert__title{
          color: #E6A23C !important;
        }
      }
      .info-block{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
        .must{
          color: $red;
        }
        .work-name{

        }
        .info-box{
          width: 400px;
        }
        .info-box1{
          height: 28px;
          width: 500px;
          border: 1px solid #bcbec2;
          border-radius: 10px;
        }
        .info-box2{
          height: 300px;
          width: 500px;
          border: 1px solid #bcbec2;
          border-radius: 10px;
          color: #000;
          padding: 10px;
        }
      }
      .toolTip-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 100px;
        margin-top: 10px;
        .toolTip{
          font-size: 14px;
          color: $darkGray;
        }
        .el-icon-warning-outline{
          color: $darkGray;
          margin-left: 10px;
          font-weight: bold;
        }
      }
      .option-type{
        width: 15px;
        height: 15px;
        margin-left: 10px;
      }
      .title-block1{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 50px;
        .title-num{
          color: $orange;
          font-size: 24px;
        }
        .title{
          font-size: 18px;
          font-weight: bold;
          margin-left: 5px;
        }
      }
      .info-box3{
        height: 28px;
        width: 300px;
        border: 1px solid #bcbec2;
        border-radius: 10px;
        color: #000;
      }
      .info-box4{
        height: 28px;
        width: 110px;
        border: 1px solid #bcbec2;
        border-radius: 10px;
        color: #000;
      }
      .form-agreement{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        .agreement-link{
         color: #0a21ff;
          font-size: 10px;
        }
      }
      .sub-btn{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 30px;
        font-size: 12px;
        .sub{
          height: 30px;
          width: 100px;
          background-color: $orange;
          color: #fff;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .save{
          border: 1px solid #bcbec2;
          height: 30px;
          width: 100px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
